<?php
session_start();
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ΦΑΝΤΑΣΜΑΤΑΚΙΑ</title>
<script type="text/javascript" >
var min_x=1;
var min_y=1;
var num_rows=9;
var num_columns=7;
var current_pioni=null;//ΤΟ ΤΡΕΧΟΝ ΠΙΟΝΙ ΤΟ ΟΠΟΙΟ ΘΑ ΠΑΙΞΕΙ
var last_square=null;//ΤΟ ΤΕΤΡΑΓΩΝΟ ΑΠΟ ΟΠΟΥ ΠΡΟΕΡΧΕΤΑΙ ΤΟ ΠΙΟΝΙ.
var current_square=null;//ΤΟ ΤΡΕΧΟΝ ΤΕΤΡΑΓΩΝΟ ΟΠΟΥ ΤΟΠΟΘΕΤΕΙΤΑΙ ΤΟ ΠΙΟΝΙ.
var tetragono=new Array();
var pionia=new Array();

//Η ΚΛΑΣΗ pioni
function pioni(){
//ΠΕΔΙΑ-ΙΔΙΟΤΗΤΕΣ
this.ikonidio;//ΤΟ ΕΙΚΟΝΙΔΙΟ ΤΟΥ ΠΙΟΝΙΟΥ ΣΤΟΝ ΠΙΝΑΚΑ ΤΟΥ ΠΑΙΧΝΙΔΙΟΥ
this.id;
this.color;//ΜΠΛΕ ή ΚΟΚΚΙΝΟ  b, r.
this.owner;//ΤΟ id ΤΟΥ ΠΑΙΚΤΗ ΠΟΥ ΕΙΝΑΙ ΙΔΙΟΚΤΗΤΗΣ : 0-εγώ, 1-αντίπαλος.
this.row;//Η ΓΡΑΜΜΗ ΣΤΗΝ ΟΠΟΙΑ ΒΡΙΣΚΕΤΑΙ
this.column;//Η ΣΤΗΛΗ ΣΤΗΝ ΟΠΟΙΑ ΒΡΙΣΚΕΤΑΙ
this.state;//0-ΣΤΗ ΘΗΚΗ , 1-ΣΤΟ ΠΑΙΧΝΙΔΙ , 2-ΕΚΤΟΣ ΠΑΙΧΝΙΔΙΟΥ. ΑΝ ΕΧΕΙ ΤΟΠΟΘΕΤΗΘΕΙ ΣΤΟ ΠΑΙΧΝΙΔΙ ή ΕΙΝΑΙ ΑΚΟΜΑ ΣΤΗΝ ΘΗΚΗ ΜΕ ΤΑ ΠΙΟΝΙΑ ή ΕΧΕΙ ΒΓΕΙ ΑΠΟ ΤΟ ΠΑΙΧΝΙΔΙ.
//ΜΕΘΟΔΟΙ
this.Hold=hold;//ΟΤΑΝ ΚΑΝΟΥΜΕ ΚΛΙΚ ΣΤΟ ΠΙΟΝΙ ΤΟΤΕ ΥΠΟΤΙΘΕΤΑΙ ΟΤΙ ΤΟ ΚΡΑΤΑΜΕ ΣΤΟ ΧΕΡΙ ΚΑΙ ΘΑ ΤΟ ΤΟΠΟΘΕΤΗΣΟΥΜΕ ΣΕ ΚΑΠΟΙΟ ΝΟΜΙΜΟ ΤΕΤΡΑΓΩΝΟ.
this.First_put=first_put;
}
//ΜΕΘΟΔΟΙ ΤΗΣ ΚΛΑΣΗΣ pioni
function hold(){//ΟΤΑΝ ΚΑΝΟΥΜΕ ΚΛΙΚ ΣΤΟ ΠΙΟΝΙ ΤΟΤΕ ΥΠΟΤΙΘΕΤΑΙ ΟΤΙ ΤΟ ΚΡΑΤΑΜΕ ΣΤΟ ΧΕΡΙ ΚΑΙ ΘΑ ΤΟ ΤΟΠΟΘΕΤΗΣΟΥΜΕ ΣΕ ΚΑΠΟΙΟ ΝΟΜΙΜΟ ΤΕΤΡΑΓΩΝΟ.
current_pioni=this;
if(current_pioni.color=="r"){
current_pioni.ikonidio.src="images/held_red.jpg";

}else{
current_pioni.ikonidio.src="images/held_blue.jpg";

}
last_square=tetragono[this.row][this.column];

}
function first_put(){
current_pioni=this;
if(current_pioni.color=="r"){
current_pioni.ikonidio.src="images/held_red.jpg";

}else{
current_pioni.ikonidio.src="images/held_blue.jpg";

}

}
//TELOS Ton MEUODON THS KLASHS pioni
//Η ΚΛΑΣΗ square
function square(){
this.ikonidio;//ΤΟ ELEMENT ΣΤΟΝ ΠΙΝΑΚΑ ΠΟΥ ΑΝΤΙΣΤΟΙΧΕΙ ΣΤΟ ΣΥΓΚΕΚΡΙΜΕΝΟ ΤΕΤΡΑΓΩΝΟ.
this.id;//ΤΟ id ΤΟΥ ΑΝΤΙΣΤΟΙΧΟY element ΣΤΟΝ ΠΙΝΑΚΑ ΤΟΥ ΠΑΙΧΝΙΔΙΟΥ.
this.row;
this.column;
this.is_active;//ΑΝ ΕΙΝΑΙ ΕΝΕΡΓΟΠΟΙΗΜΕΝΟ ΑΠΟ ΤΗΝ ΣΥΝΑΡΤΗΣΗ activate_valid_squares_for_move ΓΙΑ ΝΑ ΠΑΕΙ ΕΚΕΙ ΚΑΠΟΙΟ ΠΙΟΝΙ.
this.occupied;//ΑΝ ΕΙΝΑΙ ΚΑΤΕΙΛΗΜΕΝΟ ΑΠΟ ΑΛΛΟ ΠΙΟΝΙ.
//ΜΕΘΟΔΟΙ
this.Put_pioni=put_pioni;//ΤΟΠΟΘΕΤΗΣΗ ΤΟΥ ΠΙΟΝΙΟΥ ΣΤΟ ΤΕΤΡΑΓΩΝΟ.
}
//ΜΕΘΟΔOI ΤΗΣ ΚΛΑΣΗΣ square
function put_pioni(){//ΤΟΠΟΘΕΤΗΣΗ ΤΟΥ ΠΙΟΝΙΟΥ ΣΤΟ ΤΕΤΡΑΓΩΝΟ.
	if((current_pioni!=null) && (this.occupied==false)){
		current_pioni.row=this.row;
		current_pioni.column=this.column;
		current_pioni.state=1;
		last_square.occupied=false;
		this.occupied=true;
		this.ikonidio.appendChild(current_pioni.ikonidio);
		if(	current_pioni.color=="r"){
		current_pioni.ikonidio.src="images/red.jpg";
		}else{
		current_pioni.ikonidio.src="images/blue.jpg";
		}
		//alert(current_pioni.ikonidio.id);
		//this.ikonidio.appendChild(pionia[current_pioni.id].ikonidio);
		current_pioni=null;
	}
	else{
	//alert();
	}
//ΝΑ ΕΛΕΓΧΘΟΥΝ ΟΙ ΜΕΤΑΒΟΛΕΣ ΣΕ ΟΛΕΣ ΤΙΣ ΙΔΙΟΤΗΤΕΣ ΤΟΥ ΠΙΟΝΙΟΥ ΚΑΙ ΤΟΥ ΤΕΤΡΑΓΩΝΟΥ. !!!
}
//TELOS TON METHODON THS KLASHS square

function init_pionia(){
	for(var i=1;i<=8;i++){
		pionia[i]=new pioni();
		pionia[i].ikonidio=document.getElementById("p"+i);
		pionia[i].id=i;
		pionia[i].state=0;
		pionia[i].owner=0;
	}
	pionia[1].row=10;
	pionia[1].column=10;
	pionia[1].color="b";
	pionia[2].row=10;
	pionia[2].column=10;
	pionia[2].color="b";
	pionia[3].row=10;
	pionia[3].column=10;
	pionia[3].color="b";
	pionia[4].row=10;
	pionia[4].column=10;
	pionia[4].color="b";
	pionia[5].row=10;
	pionia[5].column=10;
	pionia[5].color="r";
	pionia[6].row=10;
	pionia[6].column=10;
	pionia[6].color="r";
	pionia[7].row=10;
	pionia[7].column=10;
	pionia[7].color="r";
	pionia[8].row=0;
	pionia[8].column=10;
	pionia[8].color="r";
}
function init_square(){

	for(var i=1;i<=num_rows;i++){
		tetragono[i]=new Array();
		for(var j=0;j<=num_columns;j++){
			tetragono[i][j]=new square();
			tetragono[i][j].id=""+i+j;
			tetragono[i][j].ikonidio=document.getElementById("t"+i+j);
			tetragono[i][j].row=i;
			tetragono[i][j].column=j;
			tetragono[i][j].is_active=false;
			tetragono[i][j].occupied=false;
		}
	}
//ΤΟ ΠΑΡΑΚΑΤΩ ΤΕΤΡΑΓΩΝΟ ΕΙΝΑΙ ΒΟΗΘΗΤΙΚΟ ΓΙΑ ΝΑ ΑΡΧΙΚΟΠΟΙΗΘΕΙ ΤΟ last_square.	
tetragono[num_rows+1]=new Array;
tetragono[num_rows+1][0]=new square();
last_square=tetragono[num_rows+1][0];
}
function init(){
init_pionia();
init_square();
}

function press_square(the_tetragono){
var the_square=tetragono[parseInt(the_tetragono.id.substring(1,2))][parseInt(the_tetragono.id.substring(2,3))];
the_square.Put_pioni();

}
function press(ikonidio){
//ΟΤΑΝ ΠΑΤΑΜΕ ΕΝΑ ΠΙΟΝΙ ΤΟΤΕ: Α,ΑΥΤΟ ΕΙΝΑΙ ΣΤΗΝ ΘΗΚΗ ΚΑΙ ΤΟ ΤΟΠΟΘΕΤΟΥΜΕ ΓΙΑ ΠΡΩΤΗ ΦΟΡΑ ΣΤΟ ΤΑΜΠΛΩ.Β1,ΕΙΝΑΙ ΗΔΗ ΣΤΟ ΤΑΜΠΛΩ ΚΑΙ ΤΟ ΤΟΠΟΘΕΤΟΥΜΕ ΣΕ ΚΑΠΟΙΟ ΝΟΜΙΜΟ ΤΕΤΡΑΓΩΝΟ ΜΕ ΑΠΛΗ ΜΕΤΑΚΙΝΗΣΗ. Β2 ΕΙΝΑΙ ΗΔΗ ΣΤΟ ΤΑΜΠΛΩ ΚΑΙ ΤΟ ΤΟΠΟΘΕΤΟΥΜΕ ΣΕ ΚΑΠΟΙΟ ΝΟΜΙΜΟ ΤΕΤΡΑΓΩΝΟ ΟΠΟΥ ΥΠΑΡΧΕΙ ΠΙΟΝΙ ΑΝΤΙΠΑΛΟΥ ΜΕ ΑΠΟΤΕΛΕΣΜΑ ΝΑ ΤΟ ΦΑΜΕ.Β3 ΕΙΝΑΙ ΗΔΗ ΣΤΟ ΤΑΜΠΛΩ ΚΑΙ ΤΟ ΟΔΗΓΟΥΜΕ ΣΤΟ ΤΕΤΡΑΓΩΝΟ ΤΕΡΜΑΤΙΣΜΟΥ ΚΑΙ ΤΕΛΕΙΩΝΕΙ ΤΟ ΠΑΙΧΝΙΔΙ ΜΕ ΝΙΚΗ ΓΙΑ ΕΜΑΣ. 
var the_pioni=pionia[parseInt(ikonidio.id.substring(1,ikonidio.id.length))];
current_pioni=the_pioni;
switch (current_pioni.state){
case 0:
current_pioni.First_put();
break;
case 1:
current_pioni.Hold();
break;
case 2:

break;

}


}
</script>
</head>

<body onload="init()">
<?php
$SID = session_id(); 
echo "<p>".$SID."</p>";
?>

<table width="50%" border="2" cellspacing="3" align="left">
  <tr>
    <td height="60" width="60px" id="t10" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t11" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t12" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t13" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t14" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t15" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t16" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t17" align="center" onclick="press_square(this)"></td>
  </tr>
  <tr>
    <td width="60px" rowspan="7" align="center" id="t20"></td>
    <td height="60" width="60px" id="t21" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t22" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t23" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t24" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t25" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t26" align="center" onclick="press_square(this)"></td>
    <td width="60px" rowspan="7" align="center" id="t27"></td>
  </tr>
  <tr>
    <td height="60" width="60px" id="t31" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t32" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t33" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t34" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t35" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t36" align="center" onclick="press_square(this)"></td>
  </tr>
  <tr>
    <td height="60" width="60px" id="t41" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t42" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t43" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t44" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t45" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t46" align="center" onclick="press_square(this)"></td>
  </tr>
  <tr>
    <td height="60" width="60px" id="t51" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t52" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t53" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t54" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t55" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t56" align="center" onclick="press_square(this)"></td>
  </tr>
  <tr>
    <td height="60" width="60px" id="t61" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t62" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t63" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t64" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t65" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t66" align="center" onclick="press_square(this)"></td>
  </tr>
  <tr>
    <td height="60" width="60px" id="t71" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t72" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t73" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t74" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t75" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t76" align="center" onclick="press_square(this)"></td>
  </tr>
  <tr>
    <td height="60" width="60px" id="t81" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t82" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t83" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t84" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t85" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t86" align="center" onclick="press_square(this)"></td>
  </tr>
  <tr>
    <td height="60" width="60px" id="t90" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t91" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t92" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t93" align="center" onclick="press_square(this)"></td>
    <td height="60"  width="60px"id="t94" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t95" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t96" align="center" onclick="press_square(this)"></td>
    <td height="60" width="60px" id="t97" align="center" onclick="press_square(this)"></td>
  </tr>
</table>
<table width="20%" border="2" cellspacing="3">
  <tr>
    <td><img src="images/opponent.jpg"id="p13"/></td>
    <td><img src="images/opponent.jpg"id="p14"/></td>
    <td><img src="images/opponent.jpg"id="p15"/></td>
    <td><img src="images/opponent.jpg"id="p16"/></td>
  </tr>
  <tr>
    <td><img src="images/opponent.jpg"id="p9"/></td>
    <td><img src="images/opponent.jpg"id="p10"/></td>
    <td><img src="images/opponent.jpg"id="p11"/></td>
    <td><img src="images/opponent.jpg"id="p12"/></td>
  </tr>
  <tr>
    <td><img src="images/red.jpg" id="p5" onclick="press(this)"/></td>
    <td><img src="images/red.jpg" id="p6" onclick="press(this)"/></td>
    <td><img src="images/red.jpg" id="p7" onclick="press(this)"/></td>
    <td><img src="images/red.jpg" id="p8" onclick="press(this)"/></td>
  </tr>
  <tr>
    <td><img src="images/blue.jpg" id="p1" onclick="press(this)"/></td>
    <td><img src="images/blue.jpg" id="p2" onclick="press(this)"/></td>
    <td><img src="images/blue.jpg" id="p3" onclick="press(this)"/></td>
    <td><img src="images/blue.jpg" id="p4" onclick="press(this)"/></td>
  </tr>
</table>
</body>
</html>
